<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
      <section class="grid-content-div">
        <div v-show="userType ===0 || userType === 2" class="home_enterprise_div">
          <el-row style="text-align: left;margin-top: 10px">
            <el-col :span="24">
              机构数据
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="6">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="padding: 14px;text-align: left;" @click="linkToEnterprise(0)">
                  <span>待核验</span>
                  <div class="content bottom clearfix">
                    <span class="num">{{enterpriseData.type0}}</span>&nbsp;&nbsp;&nbsp;&nbsp;家
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="padding: 14px;text-align: left;" @click="linkToEnterprise(1)">
                  <span>已核验</span>
                  <div class="content bottom clearfix">
                    <span class="num">{{enterpriseData.type1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;家
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="padding: 14px;text-align: left;" @click="linkToEnterprise(2)">
                  <span>待验证</span>
                  <div class="content bottom clearfix">
                    <span class="num">{{enterpriseData.type2}}</span>&nbsp;&nbsp;&nbsp;&nbsp;家
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="padding: 14px;text-align: left;" @click="linkToEnterprise(3)">
                  <span>已验证</span>
                  <div class="content bottom clearfix">
                    <span class="num">{{enterpriseData.type3}}</span>&nbsp;&nbsp;&nbsp;&nbsp;家
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="12">
            <el-card class="card" :body-style="{ padding: '0px' }">
              <div id="chartPie" style="width:100%; height:275px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card" :body-style="{ padding: '0px' }">
              <div id="chartBar" style="width:100%; height:275px;"></div>
            </el-card>
          </el-col>
        </el-row>
        </div>
        <div  v-show="userType ===0 || userType === 2" class="home_order_div">
          <el-row style="text-align: left;margin-top: 10px">
            <el-col :span="24">
              订单数据
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;text-align: left;" @click="linkToOrder(0)">
                    <span>审核中</span>
                    <div class="content bottom clearfix">
                      <span class="num">{{enterpriseData.type0}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;text-align: left;" @click="linkToOrder(2)">
                    <span>已放款</span>
                    <div class="content bottom clearfix">
                      <span class="num">{{enterpriseData.type1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="padding-top: 20px">
              <el-col :span="12">
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;text-align: left;" @click="linkToOrder(3)">
                    <span>已还款</span>
                    <div class="content bottom clearfix">
                      <span class="num">{{enterpriseData.type0}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;text-align: left;" @click="linkToOrder()">
                    <span>已结束</span>
                    <div class="content bottom clearfix">
                      <span class="num">{{enterpriseData.type1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-card class="card" :body-style="{ padding: '0px' }">
              <div id="OrdderChartPie" style="width:100%; height:275px;"></div>
            </el-card>
          </el-col>
        </el-row>
        </div>
        <div  v-show="userType ===0 || userType === 3" class="home_product_div">
          <el-row style="text-align: left;margin-top: 10px">
            <el-col :span="24">
              产品数据
            </el-col>
          </el-row>
          <el-row style="text-align: left;margin-top: 10px">
          <el-col :span="12">
            <el-card class="card" :body-style="{ padding: '0px' }">
              <div style="padding: 14px;text-align: left;" @click="linkToProduct(1)">
                <span>已上架</span>
                <div class="content bottom clearfix">
                  <span class="num">{{enterpriseData.type1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card" :body-style="{ padding: '0px' }">
              <div style="padding: 14px;text-align: left;" @click="linkToProduct(0)">
                <span>已下架</span>
                <div class="content bottom clearfix">
                  <span class="num">{{enterpriseData.type1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;条
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        </div>
      </section>

    </el-col>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  export default {
    name: 'dashboard',
    created() {
    },
    data() {
      return {
        userType: 0,
        enterpriseData: {
          type0: 1000,
          type1: 1101,
          type2: 1050,
          type3: 2000
        },
        productData: {
          type0: 0,
          type1: 1
        }
      }
    },
    mounted: function () {
      var _this = this;
      //基于准备好的dom，初始化echarts实例
      this.chartPie = echarts.init(document.getElementById('chartPie'));
      this.OrdderChartPie = echarts.init(document.getElementById('OrdderChartPie'));
      this.chartBar = echarts.init(document.getElementById('chartBar'));
      this.chartPie.setOption({
          title: {
            text: '机构发布图',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['待核验', '已核验', '待验证', '已验证']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '75%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '待核验'},
                {value: 310, name: '已核验'},
                {value: 234, name: '待验证'},
                {value: 135, name: '已验证'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
      this.OrdderChartPie.setOption({
          title: {
            text: '点单发布图',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['待核验', '已核验', '待验证', '已验证']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '75%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '已审核'},
                {value: 310, name: '已放款'},
                {value: 234, name: '已还款'},
                {value: 135, name: '已结束'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
      this.chartBar.setOption({
        title: {
          text: '机构增长图'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      });
      let user = window.localStorage.getItem('loginUserInfo')
      this.userType = parseInt(JSON.parse(user).userType)
    },
    methods: {
      linkToEnterprise(type) {
        this.$router.push({path: '/enterprise/enterprise_list?indentityState=' + type});
      },
      linkToOrder(type) {
        this.$router.push({path: '/order/order_list?orderState=' + type});
      },
      linkToProduct(type) {
        this.$router.push({path: '/product/product_list?productState=' + type});
      }
    }
  }
</script>
<style scoped lang="scss">
  .grid-content-div {
    text-align: center;
    .card {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 3px hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .1);
      display: block;
      padding: 1.25rem;
      div {
        cursor: pointer;
        .num {
          color: #0000ff;
        }
      }
    }
    span {
      color: #363636;
      font-size: 2rem;
      font-weight: 300;
      line-height: 1.125;
    }
    .content {
      padding-top: 5px;
      color: #4a4a4a;
      font-size: 1.25rem;
      font-weight: 300;
      line-height: 1.25;
    }
  }
</style>
